import React,{useEffect,useState,memo,useMemo,useCallback} from 'react';
import Slider from '../../../components/Slider';
import TabItem from '../../../components/TabItem';
import {connect} from 'react-redux';
import {useHistory} from 'react-router';
import {categoryAction,categoryDetailList} from '../../../store/actions';


import style from './index.module.scss';

const WrapSlider = memo(Slider);
const WrapTabItem = memo(TabItem);
interface Iprops{
    categoryList:Array<object>,
    currentCategory:{[key:string]:any}
    getCategory:()=>void,
    count:number
}
const Classify:React.FC<Iprops> = props=>{
    const history = useHistory();
    let [count,setCount] = useState<number>(0)
    useEffect(()=>{
        props.getCategory();
        const timer = setInterval(function(){
            setCount(count=>count+1);
        },1000)
        if(count>50) clearInterval(timer)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    console.log('count.....',count)
    return <div className={style.classify}>
            <div className={style.header}>
                <div className={style.wrap}>
                    <div onClick={()=>history.push('/search')}>搜索商品，共{props.count}款好物品</div>
                </div>
            </div>
            <div className={style.content}>
                <div className={style.left}>
                    <WrapSlider 
                        slideList={props.categoryList} 
                        prop={useMemo(()=>{return{}},[])} 
                        cb={useCallback(()=>{},[])}
                        />
                </div>
                <div className={style.right}>
                    <WrapTabItem currentCategory={props.currentCategory} />
                </div>
            </div>
    </div>
}
const mapStateToProps=(state:any)=>{
    return state.category
}
const mapDispatchToProps=(dispatch:Function)=>{
    return {
        getCategory:()=>{
            dispatch(categoryAction());
            dispatch(categoryDetailList());
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Classify)